<template>
  <!-- 我的收藏 -->
  <div class="purse-body">
    <!-- <div class="details">
      <div class="details-title">
        个人中心/<span style="color: #3894f8">我的订单</span>
      </div>

      <el-upload
        class="avatar-uploader"
        :action="UploadUrl()"
        :show-file-list="false"
        :before-upload="beforeAvatarUpload"
        :on-success="handleAvatarSuccess"
      >
        <img v-if="imageUrl" :src="imageUrl" class="avatar" />
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
      </el-upload>
    </div> -->
    <input type="file" @change="onFileChange" />
    <button @click="uploadFile" :disabled="!file">Upload</button>
  </div>
</template>

<script>
import Base64 from "base-64";
//
import {
  uploadOuterNetSts,
  getStsUploadPath,
  docInsert, // 上传成功后上传文档
  docUploadNewVersion, // 上传新版本成功后
} from "../../../../assets/api/index";
import COS from "cos-js-sdk-v5";
// import axios from "axios";
export default {
  data() {
    return {
      pagingObj: {
        currentPage: 1, //当前页
        pageSize: 10, // 一页显示多少个
        totalDevice: 10, //用户总数
      },
      imageUrl: "",
      file: null,
      data: {},
      path: "",
      size: "", // 文件大小
      fileName: "", // 上传文件的name
      fileSuffix: "", // 文件后缀
    };
  },
  components: {},
  created() {
    this.uploadOuterNetSts();
    this.getStsUploadPath();
  },
  methods: {
    // 获取 参数
    async uploadOuterNetSts() {
      console.log("1111");
      const res = await uploadOuterNetSts({ data: 1114 });
      this.data = res.data;
      console.log(this.data, "11111");
    },
    // 获取路径
    async getStsUploadPath() {
      console.log("1111");
      const res = await getStsUploadPath({
        data: { fileSuffix: "jpg", orgOrUser: 1, orgId: 1, userId: 1 },
      });
      this.path = res.data;
      console.log(this.path, "11111");
    },
    // 查看选择的文件
    onFileChange(event, opt, callback) {
      console.log(event, opt, callback);

      // 获取文件对象
      var fileInput = document.getElementById("fileInput");
      var file = fileInput.files[0];

      // 实例化FileReader对象
      var reader = new FileReader();

      // 读取文件内容
      reader.onload = function (e) {
        // 转换结果在e.target.result中
        var base64Image = e.target.result;
        // 使用base64Image进行后续操作
        console.log(base64Image);
      };

      // 以DataURL方式读取文件
      reader.readAsDataURL(file);

      // this.file = event.target.files[0];
      // this.size = event.target.files[0].size;
      // this.fileName = this.file.name;
      // var fileSuffix = this.file.name;
      // var fileArr = fileSuffix.split(".");
      // this.fileSuffix = fileArr[fileArr.length - 1];
      // console.log(this.file, this.size, this.fileName, this.fileSuffix);
      // let that = this;
      // let cos = new COS({
      //   SecretId: that.data.accessKeyId,
      //   SecretKey: that.data.accessKeySecret,
      //   SecurityToken: that.data.securityToken,
      // });

      // cos.uploadFile(
      //   {
      //     Bucket: that.data.bucketName, // 填入您自己的存储桶，必须字段
      //     Region: that.data.region, // 存储桶所在地域，例如ap-beijing，必须字段
      //     Key: that.path.path, // 存储在桶里的对象键（例如1.jpg，a/b/test.txt），必须字段
      //     Body: that.file, // 必须，上传文件对象，可以是input[type="file"]标签选择本地文件后得到的file对象
      //     // Sign: false,
      //     SliceSize: 1024 * 1024 * 5, // 触发分块上传的阈值，超过5MB使用分块上传，非必须
      //     onTaskReady: function (taskId) {
      //       // 非必须
      //       console.log(taskId);
      //     },
      //     onProgress: function (progressData) {
      //       // 非必须
      //       console.log(JSON.stringify(progressData));
      //     },
      //     // 支持自定义headers 非必须
      //     Headers: {
      //       "x-cos-meta-test": 123,
      //       "Access-Control-Allow-Origin": "*",
      //     },
      //   },
      //   function (err, data) {
      //     if (err) {
      //       console.log("上传失败", err);
      //     } else {
      //       console.log("上传成功", data);
      //       // 上传成功调用  上传文档
      //       // docInsert({
      //       //   data: {
      //       //     docName: that.fileName,
      //       //     docSize: that.size,
      //       //     docType: that.fileSuffix,
      //       //     createBy: 0,
      //       //     docPath: that.path.path,
      //       //   },
      //       // }).then((res) => {
      //       //   console.log(res);
      //       // });
      //       // 上传新版本成功后
      //       // docUploadNewVersion({
      //       //   data: {
      //       //     docId: 6,
      //       //     docSize: that.size,
      //       //     createBy: 0,
      //       //     docPath: that.path.path,
      //       //   },
      //       // }).then((res) => {
      //       //   console.log(res);
      //       // });
      //     }
      //   }
      // );

      // cos.request(
      //   {
      //     Bucket: that.data.bucketName, // 存储桶，必须
      //     Region: that.data.region, // 存储桶所在地域，例如ap-beijing，必须字段
      //     Method: "GET", // 固定值
      //     Key: that.path.path, // 存储桶内的图片文件，非必须，与detect-url二选一传递
      //     Query: {
      //       "ci-process": "sensitive-content-recognition", // 固定值，必须
      //       dataid: "123", // 自定义图片标识，非必须
      //     },
      //   },
      //   function (err, data) {
      //     if (err) {
      //       // 处理请求失败
      //       console.log(err);
      //     } else {
      //       // 处理请求成功
      //       console.log(data.RecognitionResult);
      //     }
      //   }
      // );
    },
    // 点击提交
    uploadFile() {},
  },
};
</script>

<style scoped lang="less">
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.purse-body {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  // 最上层div放 搜索框..
  .details {
    width: 93%;
    display: flex;
    flex-direction: column;
    // margin: auto;
    margin: 0 auto;
    div {
      width: 100%;
      height: 35px;
      line-height: 35px;
      display: flex;
      font-size: 17px;
      font-weight: 600;
    }
    .details-title {
      font-size: 17px;
      font-weight: 600;
      margin-top: 10px;
    }
  }
}
</style>
